<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>虚拟Dom创建的两种方式</title>
        <style>
            .red {
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="test1"></div>
        <div id="test2"></div>
        <div id="test3"></div>

        <script src="../js/react.development.js" type="text/javascript"></script>
        <script src="../js/react-dom.development.js" type="text/javascript"></script>
        <script src="../js/babel.min.js" type="text/javascript"></script>

        <!--        第一种创建虚拟dom的方式-->
        <script type="text/javascript">
            let myID = 'hello world'
            let myData = 'hello lover'

            let vDom2 = React.createElement('h3',{id:myID.toUpperCase(),demo:'asd'},React.createElement('span',{className:'red'},myData.toLowerCase()))
            let vDom3 = React.createElement('h1',{id:myID.toUpperCase(),demo:'asd'},React.createElement('span',{className:'red'},myID.toUpperCase()))
            ReactDOM.render(vDom2,document.getElementById('test2'))
            ReactDOM.render(vDom3,document.getElementById('test3'))

        </script>
<!--        第二种创建虚拟DOM方式  使用jsx-->
        <script type="text/babel">
          // 创建虚拟dom
            let vDOM1 = ( <h2 id={myID.toUpperCase()}>
                <span className="red">{myData.toUpperCase()}</span>
            </h2>)


            ReactDOM.render(vDOM1,document.getElementById('test1'))
        </script>
    </body>
</html>